<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.css"/>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/general.css"/>
		<style type="text/css">
			.main{
				padding: 11px;
				background-color: white;
			}
			.inputdiv{
				padding: 0 11px;
			}
			.sdiv{
				padding: 11px;
				border: 1px solid #C7C7C7;
				border-radius: 7px;
				margin-bottom: 11px;
			}
			.cdiv{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom:11px;
			}
			.cdiv>p {
			    font-size: 18px;
			    margin-top: 0;
			    margin-bottom: 0px;
			    color: #2a2a2a;
			}
			.butclass{
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			.butclass .mui-btn {
			    line-height: 1.1;
			    float: right;
			    width: auto !important;
			    padding: 10px 15px;
			}
			.mui-btn-blue, .mui-btn-primary, input[type=submit] {
    color: #fff;
    border: 1px solid #007aff;
    background-color: rgba(27,130,209,1);
}
.mui-input-row{
	
}
.main>p{
	padding-left: 12px;
	font-size: 13px;
}
textarea{
	color: #666666;
	font-family: "微软雅黑";
	font-size: 15px;
	line-height: 21px;
}
.mui-input-group .mui-input-row {
     height: auto;
}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">短信设置</h1>
		</header>
		<div class="mui-content" >
			<div class="main">
				<p>
					<b>注意：</b><br />
					1、短信一条为70个字。长短信为每条67个字。<br />
					2、短信内容实际长度=短信签名+短信内容。<br/>
					3、短信群发前请测试一条发送内容能成功接收后再群发。<br/>
				</p>
			</div>
			<div class="">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-collapse" id="collapse">
						<a class="mui-navigate-right" href="#">设置称呼</a>
						<div class="mui-collapse-content">
							<form class="mui-input-group">
								<div class="mui-input-row mui-radio mui-left">
									<label>A、直接使用顾客姓名  如：苗馨</label>
									<input name="radio1" type="radio" value="1" id="call_type1">
								</div>
								<div class="mui-input-row mui-radio mui-left">
									<label>B、姓名加性别组合,男（自定义）、女（自定义）  如：苗馨小姐</label>
									<input name="radio1" type="radio" value="2" id="call_type2">
								</div>
								<div class="mui-input-row mui-radio mui-left">
									<label>C、姓氏加性别组合,男（自定义）、女（自定义）  如：苗小姐</label>
									<input name="radio1" type="radio" value="3" id="call_type3">
								</div>
								<div class="inputdiv">
									<div class="mui-input-row">
										<label>男</label>
										<input type="text" id="username_male" placeholder="输入自定义">
									</div>
									<div class="mui-input-row">
										<label>女</label>
										<input type="text" id="username_female" class="mui-input-clear" placeholder="输入自定义">
									</div>
									
									<div class="mui-button-row">
										<button id="subbut" class="mui-btn mui-btn-primary" type="button" onclick="return false;">确认</button>&nbsp;&nbsp;
										<button id="close" class="mui-btn mui-btn-primary" type="button" onclick="return false;">取消</button>
									</div>
								</div>
							</form>
						</div>
					</li>
				</ul>
				
				
			</div>
			<div class="main" id="mlistid">
				<div class="mui-input-row sdiv">
				 	<div class="cdiv">
				 		<p>1、顾客生日</p>
				 	</div>
					<textarea id="1" rows="4" id="" placeholder="多行文本框" /></textarea>
					<div class="butclass">
				 			<button data-id="1" type="button" class="mui-btn mui-btn-blue">保存</button>
				 			<button data-id="1" dtype="true" type="button" class="mui-btn mui-btn-blue">还原</button>
				 			<div class="mui-input-row mui-checkbox">
								<label>是否启用</label>
								<input name="checkbox1" value="Item 1" type="checkbox" checked>
							</div>
					</div>
				</div>
			
				<div class="mui-input-row sdiv">
				 	<div class="cdiv">
				 		<p>2、余额不足</p>
				 	</div>
					<textarea id="2" rows="4" id="" placeholder="多行文本框"/></textarea>
					<div class="butclass">
				 			<button data-id="2" type="button" class="mui-btn mui-btn-blue">保存</button>
				 			<button data-id="2" dtype="true" type="button" class="mui-btn mui-btn-blue">还原</button>
				 			<div class="mui-input-row mui-checkbox">
								<label>是否启用</label>
								 <input name="checkbox1" value="Item 1" type="checkbox" checked>
							</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var mlist = [];	//存消息模板的数组
			window.onload = function(){
				mui.init();
				
				get_call();
				getmessage();
				
				//监听确认
				g("subbut").addEventListener("tap",function(){
					  	var radios = document.getElementsByName("radio1"),
			            	call_type = 1,
			            	um = g("username_male"),
							uf = g("username_female");
			            radios.forEach(function(item,index){
			            	if(item.checked == true){
			                    call_type = parseInt(item.value);
			                }
			            })
			            var data = {
			            	url:"/api/message/set_call",
			            	data:{
			            		access_token:acctoken(),
			            		call_type:call_type,
			            	}
			            }
			            if(call_type === 2){
			            	data.data.username_male = um.value;
			            	data.data.username_female = uf.value;
			            }
			            if(call_type === 3){
			            	data.data.surname_male = um.value;
			            	data.data.surname_female = uf.value;
			            }
			            ajax(data,function(res){
			            	console.log(res)
			            	mui.toast(res.msg);
			            	get_call();
			            })
					
				})
				
				//监听取消
				g("close").addEventListener("tap",function(){
					$("#collapse").removeClass("mui-active");
				})
			}
			
			//获取称呼
			function get_call(){
				var data = {
					url:"/api/message/get_call",
					data:{
						access_token:acctoken(),
					}
				}
				ajax(data,function(res){
					console.log("称呼数据",res);
					$('#call_type'+res.data.call_type).prop("checked",true);
					//g('call_type'+res.data.call_type).checked = 'checked';
					var um = g("username_male"),
						uf = g("username_female");
					if(res.data.call_type === 2){
						um.value = res.data.username_male;
						uf.value = res.data.username_female;
					}else if(res.data.call_type === 3){
						um.value = res.data.surname_male;
						uf.value = res.data.surname_female;
					}
					
					
				})
				
				
			}
			
			
			
			
			//获取消息模板
			function getmessage(){
				var data = {
					url:"/api/message/list_message",
					data:{
						access_token:acctoken(),
					}
				}
				ajax(data,function(res){
					console.log("消息列表",res);
					mlist = res.data;
					set_message_list(res.data);
				})
			}
			
			function set_message_list(list){
				let str = '';
				if(list&&list.length){
					list.forEach(function(item,index){
						if(item.id === 7){
							list.splice(index,1);
						}
					})
					list.forEach(function(item,index){
						if(item.id == 7){
							return false;
						}
						var is_use = 1;
						if(item.custom_content.length && item.custom_content[0].is_use){
							is_use = item.custom_content[0].is_use;
						}
						str += '<div class="mui-input-row sdiv">'+
								 	'<div class="cdiv">'+
								 		'<p>'+(index+1)+'、'+item.name+'</p>'+
								 	'</div>'+
									'<textarea id="'+item.id+'" rows="4" id="" placeholder="多行文本框" />';
									if(item.custom_content.length){
										str += item.custom_content[0].content;
									}else{
										str += item.content;
									}
									str += '</textarea>'+
									
									'<div class="butclass">'+
								 			'<button data-id="'+item.id+'" type="button" class="mui-btn mui-btn-blue">保存</button>'+
								 			'<button data-id="'+item.id+'" dtype="true" type="button" class="mui-btn mui-btn-blue">还原</button>'+
								 			'<div class="mui-input-row mui-checkbox">'+
												'<label>是否启用</label>'+
												'<input name="checkbox1"  value="'+item.id+'" type="checkbox" ';
											if(item.custom_content.length && item.custom_content[0].is_use == 2){
										  	
											}else{
											  	str += ' checked';
											}
											str +='>'+
										'</div>'+
									'</div>'+
								'</div>';
						
					})
				}else{
					str = '<div class="nolistdiv">暂无数据</div>'
				}
				g("mlistid").innerHTML = str;
				
				//监听按钮  保存修改 和还原
				$(".mui-btn").on("tap",function(e){
					var id = $(this).attr("data-id");
					var dtype = $(this).attr("dtype");
					var content = g(id).value;
					console.log(dtype);
					if(dtype){
						mlist.forEach(function(item,index){
							if(id == item.id){
								content = item.content;
							}
						})
					}
					var data = {
						url:"/api/message/custom_message",
						data:{
							access_token:acctoken(),
							message:[{
								"message_id":id,
            					"content":content,
            					"is_use":1
							}]
						}
					}
					ajax(data,function(res){
						console.log(res);
						mui.toast(res.msg);
						getmessage();
					})
				})
				
				
				$("input[type=checkbox]").bind("change",function(){
					var mid = this.value
					var content = g(mid).value;
					console.log(this.checked);
					var data = {
						url:"/api/message/custom_message",
						data:{
							access_token:acctoken(),
							message:[{
								"message_id":mid,
								"content":content,
            					"is_use":1
							}]
						}
					}
					if(this.checked){
					}else{
						data.data.message[0].is_use = 2;
					}
					ajax(data,function(res){
							console.log(res);
							mui.toast(res.msg);
							getmessage();
						})
					
				})
			}
			
			
			
			//设置模板
			function setmessage(list){
				if(list&&list.length){
					list.forEach(function(item,index){
						var id = g(item.id)||false;
						if(id){
							if(item.custom_content&&item.custom_content.length){
								id.value = item.custom_content[0].content;
							}else{
								id.value = item.content;
							}
						}
					})
				}
			}
			
			
		</script>
	</body>

</html>